<template>
    <div class="common-layout">
        <el-container style="height: 100%">
            <el-header>
                <Menu></Menu>
            </el-header>
            <el-header style="background-color: white;display: flex">
                <el-col :span="2" style="display: flex">

                </el-col>
                <el-col :span="3" class="imgCol">
                    <img :src="route.query.coverUrl" class="<imag></imag>e" />
                </el-col>
                <el-col :span="2" style="display: flex">
                    <div class="bottom_panel">
                        <i @click="toggleLike" class="icon" style="cursor:pointer" v-for="index in 1"
                            :class="icon[index]"></i>
                        <Transition name="slide-fade">
                            <p v-if="isLiked">❤️
                            </p>
                        </Transition>

                        <span class="like_text" v-if="isLiked">取消点赞</span>
                        <span class="like_text" v-else>点赞</span>
                    </div>
                </el-col>
                <el-col :span="3" class="nameDiv">

                    <el-tag size="large" effect="plain" v-for="(item) in dynamicTags"
                        v-if="dynamicTags.value!=null">{{item}}
                    </el-tag>
                </el-col>

                <el-col :span="10">
                    <h3>{{route.query.name}}</h3>
                </el-col>
                <el-col :span="3" class="teacherDiv">
                    <router-link :to="{path:'/personspace',query:{id:course.tid}}" class="router-link">
                        <span>资料上传者：</span>
                        <span>{{route.query.tchname}}</span>
                    </router-link>

                </el-col>
                <el-col :span="2"></el-col>
            </el-header>
            <el-container>
                <el-aside width="300px">
                    <el-menu class="el-menu-vertical-demo " active-text-color="#42b983">
                        <!--                        <el-menu-item index="2" class="router-link">-->
                        <!--                        </el-menu-item>-->
                        <router-link :to="{path:'/studyCourse',query:course}" class="router-link"
                            style="text-decoration: none;">
                            <el-menu-item index="2" class="router-link">
                                <el-icon>
                                    <icon-menu />
                                </el-icon>
                                <span>课程观看</span>
                            </el-menu-item>
                        </router-link>
                        <router-link :to="{path:'/commentArea',query:course}" class="router-link"
                            style="text-decoration: none;">
                            <el-menu-item index="3" class="router-link">
                                <el-icon>
                                    <icon-menu />
                                </el-icon>
                                <span>讨论区</span>
                            </el-menu-item>
                        </router-link>

                    </el-menu>
                </el-aside>
                <el-main class="mainDiv">
                    <div class="videoDiv">

                        <video controls="true" width="1000" poster ref="videoRef"
                            style="padding-bottom: 20px;padding-top: 20px">
                            <source :src="url" type="video/mp4" />
                        </video>

                        <!-- <button @click="toggleLike" :class="{ 'liked': isLiked }">

                            <img class="like_img" src="../../assets/点赞2.png" v-if="isLiked">
                            <img class="like_img" src="../../assets/点赞1.png" v-else>
                            <span class="like_text" v-if="isLiked">取消点赞</span>
                            <span class="like_text" v-else>点赞</span>
                        </button>  -->

                    </div>

                    <!--                    <router-view></router-view>-->
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script setup>
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
    } from '@element-plus/icons-vue'
    import {useRoute} from 'vue-router'
    import {ref,onMounted,reactive} from "vue";
import { LikeCourse, UnLikeCourse, getLike } from "@/api/recommend.js"
import { useStore } from 'vuex';
const store = useStore();

const icon = reactive({
    // "1":"iconfont icon-shoucang1",
    "1":"iconfont icon-dianzan1"
})
    const route = useRoute();
    const course = route.query;
    // console.log(course);
    let tempId = {id:route.query.tid}
    const url = route.query.url
    const dynamicTags = ref([])
    // console.log(dynamicTags.value)
    const commentList = ref([])
const likeCount = ref(0);
const isLiked = ref(false);
const getIsLike=()=>{
    let icon_list = document.querySelectorAll(".icon");
    const data = ({
            userId: store.getters.getId,
            courseId: course.id
        })
    getLike(data).then((res) => {
            console.log("res: " + res.state);
            if (res.state == 0) {
                
                isLiked.value = res.data.islike;
                if(isLiked.value==0){
                    icon_list[0].style.color = "";
                }
                else{
                    icon_list[0].style.color = "#44b6fd";
                }
                
            }
        });
    
}
const toggleLike = ()=>{
    let icon_list = document.querySelectorAll(".icon");
    console.log(icon_list[0].style.backgroundColor);
    // icon_list.forEach((item) => {
    //     item.
    // })
    if (isLiked.value) {
        
        const data = ({
            userId: store.getters.getId,
            courseId: course.id
        })
        UnLikeCourse(data).then((res) => {
            console.log("res: " + res.state);
            if (res.state == 0) {
                likeCount.value--;
                isLiked.value = !isLiked.value;
                icon_list[0].style.color = "";
            }
        });
    }
    else {
        // likeCount.value++;
        const data = ({ 
            userId: store.getters.getId,
            courseId: course.id 
        })
            LikeCourse(data).then((res) => {
            console.log("res: " + res.state);
            if(res.state==0){
                likeCount.value++;
                isLiked.value = !isLiked.value;
                console.log("123");
                icon_list[0].style.color = "#44b6fd";
            }
        });
    }
    
}
    onMounted(()=>{
        console.log(route.query)
        getIsLike();
        // tempId = {id:route.query.tid}
        dynamicTags.value = route.query.label.split('&')


    })


</script>

<style scoped>
.icon:hover{
    /* background-color: aqua; */
}


.slide-fade-enter-active {
    transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
}


.bottom_panel {
    display: flex;
    align-items: center;
}
    .common-layout{
        height: 100%;
    }
    .videoDiv {
        border-radius: 12px;
        display: flex;
        background-color: white;
        flex-direction: column;
        align-items: center;
        flex:1;
    }

    .mainDiv {
        /*margin-top: 10px;*/
        /*background-color: white;*/
        /* border-radius: 2%; */
    }

    .imgCol {
        display: flex;
        justify-content: space-around;
    }

    .nameDiv {
        display: flex;
        align-items: center;
    }

    .teacherDiv {
        display: flex;
        align-items: center
    }
    .el-menu-vertical-demo{
        margin-top: 20px;
        margin-left: 20px;
    }

    div > a {
        color: #2c3e50;
        text-decoration: none;
    }


    .router-link:hover {
        color: #42b983;
    }
button{
    left: 0;
    

}
button:hover{
    /* background-color: red; */

}
button{ 
    display: flex;
    align-items: center;
    .icon{
            display: inline-block;
                /* width: 20px;*/
                /* height: 20px;  */
                /* background-image: url(../../assets/点赞1.png); */
                background-size: cover;
    }
    .like_img{
        width: 20px;
        height: 20px;
    }
}
    /* button {
        padding: 5px;
        border: none;
        background-color: transparent;
        cursor: pointer;
    }
*/

</style>